import React, {
  Fragment,
  isValidElement,
  cloneElement,
  useState,
  useEffect,
} from "react";
import { unstable_batchedUpdates, flushSync } from "react-dom";
import { Button } from "antd";
import TestProps from "./components/props";

const AdvancedDocs: React.FC = () => {
  const keywords = ["vue", "react"];
  const [count, setCount] = useState(0);
  useEffect(() => {
    console.log("useEffect");
  }, []);
  const a = (
    <div>
      text
      <Fragment>aaaaa</Fragment>
      <ul>
        {keywords.map((item) => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </div>
  );
  console.log(a, React.Children.toArray(a.props.children));
  return (
    <div>
      <h1>AdvancedDocs</h1>
      <div>{a}</div>
      <AdvancedDocs2></AdvancedDocs2>
      <hr />
      <br />
      <Button
        onClick={() =>
          setCount((count) => {
            console.log(count);
            return count + 1;
          })
        }
      >
        count: {count}
      </Button>
      <hr />
      <br />
      <TestProps></TestProps>
    </div>
  );
};

interface IState {
  name: string;
  objA: any;
  count: number;
}

class AdvancedDocs2 extends React.Component {
  state: Readonly<IState> = {
    name: "zhangsan",
    objA: {
      c: {
        cc: 1,
        dd: 2,
      },
    },
    count: 0,
  };
  render() {
    return (
      <div>
        <p>{this.state.name}</p>
        <Button onClick={() => this.setState({ name: "lisi" })}>
          修改name
        </Button>
        <p>{this.state.objA.c.dd}</p>
        <Button
          onClick={() =>
            this.setState({
              objA: {
                ...this.state.objA,
                c: {
                  ...this.state.objA.c,
                  dd: 3,
                },
              },
            })
          }
        >
          修改dd
        </Button>
        <p>{this.state.count}</p>
        <Button
          onClick={() =>
            this.setState({ count: this.state.count + 1 }, () =>
              console.log(this.state.count)
            )
          }
        >
          {" "}
          +1
        </Button>
      </div>
    );
  }
}

export default AdvancedDocs;
